<!---
  @author: andy
  @description: 
-->
<template>
  <div class="appearance-panel">
    <div class="appearance-item">
      <div class="header">通用</div>
      <div class="sidebar">
        <div class="sidebar-item" v-for="item in commons" :key="item.name">
          <span>{{item.name}}</span>
          <component :options="familyOptions" :min="0" :max="20" placeholder="请输入" @change="(value: CheckedType | Record<string , unknown>) => onChange(value , item)" v-model:checked="item.value" v-model:value="item.value" :is="item.component" />
        </div>
      </div>
    </div>
    <div class="appearance-item">
      <div class="header">进度条</div>
      <div class="sidebar">
        <div class="sidebar-item" v-for="item in progress" :key="item.name">
          <span>{{item.name}}</span>
          <component @change="(value: CheckedType) => onChangeProgress(value , item)" v-model:checked="item.value" :is="item.component" />
        </div>
      </div>
    </div>
    <div class="appearance-item">
      <div class="header">动画</div>
      <div class="sidebar">
        <div class="sidebar-item" v-for="item in animations" :key="item.name">
          <span>{{item.name}}</span>
          <component v-model:value="item.value" :options="animationOptions" @change="(value: CheckedType) => onChangeAnimation(value , item)" :is="item.component" />
        </div>
      </div>
    </div>
    <div class="appearance-item">
      <div class="header">功能</div>
      <div class="sidebar">
        <div class="sidebar-item" v-for="item in abilities" :key="item.name">
          <span>{{item.name}}</span>
          <component v-model:checked="item.value" @change="(value: CheckedType) => onChangeAbility(value , item)" :is="item.component" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, shallowRef, type Component } from 'vue';
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
import { Input, InputNumber, Select, Switch } from 'ant-design-vue';
import type { PageTransitionType } from '@/stores/configs/types';
type CheckedType = boolean | string | number;
type CommonItem = {
  name: string;
  value: CheckedType | Record<string , unknown>;
  component: Component;
}
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const familyOptions = ref([
  { label : 'Title-Black' , value : 'Title-Black' },
  { label : '普通' , value : 'sans-serif' },
  { label : 'Roboto-Bold' , value : 'Roboto-Bold' },
  { label : 'Roboto-Medium' , value : 'Roboto-Medium' },
  { label : 'SourceHanSansCN-Medium' , value : 'SourceHanSansCN-Medium' },
  { label : 'SourceHanSansCN-Regular' , value : 'SourceHanSansCN-Regular' },
  { label : '华康黑体W5' , value : 'HKHT' },
  { label : '思源黑体Regular' , value : 'SYHT' }
])
const commons = ref<CommonItem[]>([
  { name : '水印' , value : config.value.app.watermark , component : shallowRef(Switch) },
  { name : '水印内容' , value : config.value.app.watermarkText , component : shallowRef(Input) },
  { name : '动态标题' , value : config.value.app.dynamicTitle , component : shallowRef(Switch) },
  { name : '字体大小' , value : config.value.app.size , component : shallowRef(InputNumber) },
  { name : '字体样式' , value : config.value.app.family , component : shallowRef(Select) },
  { name : '圆角' , value : config.value.app.radius , component : shallowRef(InputNumber) }
]);
const progress = ref<CommonItem[]>([
  { name : '启用页面切换进度条' , value : config.value.transition.progress , component : shallowRef(Switch) }
]);
const animationOptions = ref([
  { label : '显隐' , value : 'fade' },
  { label : '滑动' , value : 'slide' },
  { label : '缩放' , value : 'scale' }
])
const animations = ref<CommonItem[]>([
  { name : '页面切换动画' , value : config.value.transition.name , component : shallowRef(Select) }
]);
const abilities = ref<CommonItem[]>([
  { name : '启用websocket功能' , value : config.value.ability.websocket , component : shallowRef(Switch) },
  { name : '启用stomp功能' , value : config.value.ability.stomp , component : shallowRef(Switch) },
  { name : '启用sse功能' , value : config.value.ability.sse , component : shallowRef(Switch) }
])
const onChange = (value: CheckedType | Record<string , unknown> , data: CommonItem) => {
  if (data.name === '水印') {
    configStore.updateConfig({
      app : {
        watermark : value as boolean
      }
    })
  } else if (data.name === '动态标题') {
    configStore.updateConfig({
      app : {
        dynamicTitle : value as boolean
      }
    })
  } else if (data.name === '水印内容') {
    configStore.updateConfig({
      app : {
        watermarkText : (value as Record<string , {value: string}>).target.value
      }
    })
  } else if (data.name === '字体大小') {
    configStore.updateFontSize(Number(value));
  } else if (data.name === '字体样式') {
    configStore.updateFontFamily(value as string);
  } else if (data.name === '圆角') {
    configStore.updateRadius(Number(value));
  }
}
const onChangeProgress = (value: CheckedType , data: CommonItem) => {
  if (data.name === '启用页面切换进度条') {
    configStore.updateConfig({
      transition : {
        progress : value as boolean
      }
    })
  }
}
const onChangeAnimation = (value: CheckedType , data: CommonItem) => {
  configStore.updateConfig({
    transition : {
      name : data.value as PageTransitionType
    }
  })
}
const onChangeAbility = (value: CheckedType , data: CommonItem) => {
  if (data.name === '启用websocket功能') {
    configStore.updateConfig({
      ability : {
        websocket : value as boolean
      }
    });
  } else if (data.name === '启用stomp功能') {
    configStore.updateConfig({
      ability : {
        stomp : value as boolean
      }
    });
  } else if (data.name === '启用sse功能') {
    configStore.updateConfig({
      ability : {
        sse : value as boolean
      }
    });
  }
  setTimeout(() => {
    window.location.reload();
  } , 1000)
}
</script>
<style lang='less' scoped>
.appearance-panel {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
  gap: 0.16rem;
  .appearance-item {
    display: flex;
    flex-flow: column;
    .header {
      margin-bottom: 0.1rem;
      height: 0.32rem;
      line-height: 0.32rem;
      display: flex;
      align-items: center;
      font-size: var(--font-size-medium);
      font-weight: 500;
    }
    .sidebar {
      display: flex;
      flex-flow: column;
      gap: 0.16rem;
      .sidebar-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        :deep(.ant-input) {
          width: 2rem;
        }
        :deep(.ant-select) {
          width: 2rem;
        }
      }
    }
  }
}
</style>